<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .banner {
            width: 400px;
            height: 300px;
            margin: auto;
            position: relative;
        }
        .banner li {
            width: 400px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            position: absolute;
            top: 0;
            background-color: #f00;

            opacity: 0;
        }
    </style>
</head>
<body>

    <div class="banner">
        <ul>
            <li style="opacity: 1;">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

    <script>
        // 1 返回顶部的效果
        //    距离顶部大于500px的时候，返回顶部显示，不足500px返回顶部不显示
        //    实现返回顶部效果
        //    距离顶部大于500px的时候，顶部显示一个色块

        // 2 判断到达底部

        // 3 获取验证码

        // 4 全选和反选

        // 5 选项卡

        // 6 小米轮播
        //    每隔2s换下一张    
        //    上下翻页
        //    小点切换


        // css部分   所有的li定位在同一个地方，隐藏     把当前这个图显示


        // 思路：
        //    设置一个变量   记录播放第几张
        //    count = 0;

        //    定时器   2s  count++
        //    隐藏所有的，第count对应的这一张图片显示  
        
        //    播完最后一张之后，count回到第一张


        //   上下翻页  改变count的值   上翻页count--   下翻页count++


        //   小点切换  改变count的值   点是第几个，count就等于几

    </script>
    
</body>
</html>